<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getArticleById, like, favorite, addComment, commentLike } from '@/api/article'
import { showToast } from 'vant'

const route = useRoute()
const article = ref(null)
const showCommentPopup = ref(false)
const commentContent = ref('')
const replyTo = ref(null)

const getArticleDetail = async () => {
  try {
    const res = await getArticleById(route.params.id)
    article.value = res.data
  } catch (error) {
    showToast('获取文章详情失败')
  }
}

const handleLike = async () => {
  try {
    await like(article.value.id)
    article.value.likeStatus = article.value.likeStatus === 0 ? 1 : 0
    article.value.liked = article.value.likeStatus === 1 
      ? article.value.liked + 1 
      : article.value.liked - 1
  } catch (error) {
    showToast('操作失败')
  }
}

const handleFavorite = async () => {
  try {
    await favorite(article.value.id)
    article.value.favoriteStatus = article.value.favoriteStatus === 0 ? 1 : 0
    article.value.favorite = article.value.favoriteStatus === 1 
      ? article.value.favorite + 1 
      : article.value.favorite - 1
  } catch (error) {
    showToast('操作失败')
  }
}

// 处理评论点赞
const handleCommentLike = async (comment) => {
  try {
    await commentLike(comment.commentVO.id)
    comment.commentVO.likesCount = comment.commentVO.likesCount + 1
  } catch (error) {
    showToast('操作失败')
  }
}

// 发布评论
const submitComment = async () => {
  if (!commentContent.value.trim()) {
    showToast('请输入评论内容')
    return
  }

  const data = {
    articleId: article.value.id,
    pid: replyTo.value ? replyTo.value.commentVO.id : 0,
    content: commentContent.value,
    type: 0,
    toUserId: replyTo.value ? replyTo.value.userInfo.id : null
  }

  try {
    await addComment(data)
    showToast('评论成功')
    commentContent.value = ''
    showCommentPopup.value = false
    replyTo.value = null
    getArticleDetail()
  } catch (error) {
    showToast('评论失败')
  }
}

// 回复评论
const replyComment = (comment, replyComment = null) => {
  if (replyComment) {
    replyTo.value = {
      commentVO: comment.commentVO,
      userInfo: replyComment.userInfo,
      isReplyToComment: true,
      parentComment: comment
    }
  } else {
    replyTo.value = {
      commentVO: comment.commentVO,
      userInfo: comment.userInfo,
      isReplyToComment: false,
      parentComment: null
    }
  }
  showCommentPopup.value = true
}

onMounted(() => {
  getArticleDetail()
})
</script>

<template>
  <div class="article-detail" v-if="article">
    <div class="header">
      <van-nav-bar
        left-arrow
        @click-left="$router.back()"
        fixed
      >
        <template #title>
          <div class="user-info">
            <img :src="article.userInfo.avatar" class="avatar">
            <span class="name">{{ article.userInfo.username }}</span>
          </div>
        </template>
      </van-nav-bar>
    </div>
    
    <div class="content">
      

      <div class="swiper">
        <van-swipe :autoplay="3000" indicator-color="#FF653F">
          <van-swipe-item v-for="img in article.imagesList" :key="img">
            <img :src="img" class="swipe-img">
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="article-content">
        <h1 class="title">{{ article.title }}</h1>
        <div class="tags">
          <span v-for="tag in article.tagList" :key="tag" class="tag">
            {{ tag }}
          </span>
        </div>
        <div class="text" v-html="article.content"></div>
      </div>

      <div class="stats">
        <div class="stat-item">
          <van-icon name="eye-o" />
          <span>{{ article.view }}</span>
        </div>
        <div class="stat-item">
          <van-icon name="chat-o" />
          <span>{{ article.review }}</span>
        </div>
        <div class="stat-item">
          <span class="time">{{ article.createTime }}</span>
        </div>
      </div>
    </div>

    <!-- 添加评论列表 -->
    <div class="comments">
      <div class="comment-title">评论 {{ article.review }}</div>
      <div class="comment-list">
        <div v-for="comment in article.reviewList" :key="comment.commentVO.id" class="comment-item">
          <img :src="comment.userInfo.avatar" class="avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.userInfo.username }}</span>
              <span class="time">{{ comment.commentVO.createTime }}</span>
            </div>
            <div class="text">{{ comment.commentVO.content }}</div>
            <div class="comment-footer">
              <div class="like" @click="handleCommentLike(comment)">
                <van-icon name="like-o" />
                <span>{{ comment.commentVO.likesCount }}</span>
              </div>
              <div class="reply" @click="replyComment(comment)">回复</div>
            </div>
            
            <!-- 修改回复列表部分 -->
            <div v-if="comment.replyList && comment.replyList.length > 0" class="reply-list">
              <div v-for="reply in comment.replyList" :key="reply.commentVO.id" class="reply-item">
                <img :src="reply.userInfo.avatar" class="avatar">
                <div class="reply-content">
                  <div class="reply-header">
                    <div class="reply-users">
                      <span class="username">{{ reply.userInfo.username }}</span>
                      <template v-if="reply.toUserInfo">
                        <span class="reply-to">&nbsp;回复&nbsp;</span>
                        <span class="username">{{ reply.toUserInfo.username }}</span>
                      </template>
                    </div>
                    <span class="time">{{ reply.commentVO.createTime }}</span>
                  </div>
                  <div class="text">{{ reply.commentVO.content }}</div>
                  <div class="reply-footer">
                    <div class="like" @click="handleCommentLike(reply)">
                      <van-icon name="like-o" />
                      <span>{{ reply.commentVO.likesCount }}</span>
                    </div>
                    <div class="reply" @click="replyComment(comment, reply)">回复</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论弹出层 -->
    <van-popup
      v-model:show="showCommentPopup"
      position="bottom"
      round
      :style="{ height: '30%' }"
    >
      <div class="comment-popup">
        <div class="popup-header">
          <span v-if="replyTo">
            <template v-if="replyTo.isReplyToComment">
              回复 {{ replyTo.userInfo.username }}
            </template>
            <template v-else>
              回复评论
            </template>
          </span>
          <span v-else>发表评论</span>
          <van-icon name="cross" @click="showCommentPopup = false" />
        </div>
        <van-field
          v-model="commentContent"
          type="textarea"
          placeholder="说点什么..."
          rows="3"
          autosize
        />
        <div class="submit-btn">
          <van-button type="primary" size="small" @click="submitComment">发送</van-button>
        </div>
      </div>
    </van-popup>

    <div class="footer">
      <div class="action-bar">
        <div class="input" @click="showCommentPopup = true">
          说点什么...
        </div>
        <div class="actions">
          <div class="action-item" @click="handleLike">
            <van-icon 
              :name="article.likeStatus === 0 ? 'like-o' : 'like'" 
              :color="article.likeStatus === 0 ? '#666' : '#FF653F'"
            />
            <span>{{ article.liked }}</span>
          </div>
          <div class="action-item" @click="handleFavorite">
            <van-icon 
              :name="article.favoriteStatus === 0 ? 'star-o' : 'star'" 
              :color="article.favoriteStatus === 0 ? '#666' : '#FF653F'"
            />
            <span>{{ article.favorite }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.article-detail {
  min-height: 100vh;
  background: #fff;
  padding-top: 46px;
  padding-bottom: 50px;

  .content {
    .user-info {
      display: flex;
      align-items: center;
      padding: 15px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .info {
        .name {
          font-size: 16px;
          font-weight: 500;
        }
        .address {
          font-size: 12px;
          color: #999;
          margin-top: 2px;
        }
      }
    }

    .swiper {
      .swipe-img {
        width: 100%;
        height: 250px;
        object-fit: cover;
      }
    }

    .article-content {
      padding: 15px;
      .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .tags {
        margin-bottom: 15px;
        .tag {
          display: inline-block;
          padding: 4px 8px;
          background: #f5f5f5;
          color: #FF6F61;
          border-radius: 4px;
          font-size: 12px;
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
      .text {
        font-size: 15px;
        line-height: 1.6;
        color: #333;
      }
    }

    .stats {
      display: flex;
      padding: 15px;
      border-top: 1px solid #f5f5f5;
      .stat-item {
        display: flex;
        align-items: center;
        margin-right: 15px;
        color: #666;
        font-size: 13px;
        .van-icon {
          margin-right: 4px;
        }
        .time {
          color: #999;
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #f5f5f5;
    .action-bar {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      .input {
        flex: 1;
        background: #f5f5f5;
        border-radius: 20px;
        padding: 8px 15px;
        color: #999;
        font-size: 14px;
      }
      .actions {
        display: flex;
        margin-left: 15px;
        .action-item {
          display: flex;
          align-items: center;
          margin-left: 15px;
          font-size: 14px;
          color: #666;
          .van-icon {
            font-size: 20px;
            margin-right: 4px;
          }
        }
      }
    }
  }

  .header {
    .user-info {
      display: flex;
      align-items: center;
      .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .name {
        font-size: 16px;
        color: #333;
      }
    }
  }

  .comments {
    padding: 15px;
    .comment-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 15px;
    }
    .comment-item {
      display: flex;
      margin-bottom: 20px;
      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .comment-content {
        flex: 1;
        .comment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
          .username {
            font-size: 14px;
            font-weight: 500;
          }
          .time {
            font-size: 12px;
            color: #999;
            margin-left: auto;
          }
        }
        .text {
          font-size: 14px;
          color: #333;
          margin-bottom: 8px;
        }
        .comment-footer {
          display: flex;
          justify-content: flex-end;
          gap: 15px;
          font-size: 12px;
          color: #666;
          margin-top: 8px;
          .like, .reply {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
          }
        }
      }
    }

    .reply-list {
      border-radius: 8px;
      .reply-item {
        display: flex;
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
        .avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .reply-content {
          flex: 1;
          .reply-header {
            display: flex;
            
            align-items: center;
            margin-bottom: 6px;
            .reply-users {
              display: flex;
              align-items: center;
              gap: 8px;
              .username {
                font-size: 14px;
                font-weight: 500;
              }
              .reply-to {
                color: #999;
                font-size: 14px;
              }
            }
            .time {
              font-size: 12px;
              color: #999;
              margin-left: auto;
            }
          }
          .text {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
          }
          .reply-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 8px;
            .like, .reply {
              display: flex;
              align-items: center;
              gap: 4px;
              cursor: pointer;
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
    }
  }

  .comment-popup {
    padding: 15px;
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;
    }
    .submit-btn {
      margin-top: 15px;
      text-align: right;
    }
  }
}
</style> 